<template>
  <div class="">
    <el-radio-group v-model="radio">
      <div class="dahezi" v-for="(item, index) in options" :key="index">
        <el-col :span="6">
          <el-radio :label="item.title"
            >{{ item.code }}
            <el-input v-model="item.input" placeholder="请输入内容"> </el-input>
          </el-radio>
        </el-col>
        <el-col :span="3">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <span>上传图片</span>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
      </div>
      <el-button
        type="danger"
        icon="el-icon-plus"
        size="small"
        style="width: 140px"
        @click="bianli"
        disabled
        >添加选项与答案</el-button
      >
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: "one",
  data() {
    return {
      radio: "1",
      input: "",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  components: {},
  props: ["options"],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    bianli() {
      this.$emit("addSelect");
    },
  },
};
</script>

<style lang="less" scoped>
.dahezi {
  height: 79px;
  width: 700px;
  .el-radio {
    margin-top: 10px;
    margin-left: 50px;
  }
  .el-input {
    width: 200px;
    position: relative;
  }
  /deep/.el-upload--picture-card {
    position: absolute;
    left: 128px;
    top: -2px;
    width: 88px;
    height: 64px;
    position: relative;
  }
  .el-upload {
    span {
      position: absolute;
      left: 18px;
      top: -40px;
      font-size: 12px;
      color: rgb(216, 11, 11);
    }
  }
  .el-input__inner {
    width: 450px;
  }
}
</style>
